<template>
	<view :class="`ss-flex-col gap-${gap} ${className}`">
		<view @tap="handleType" class="ss-flex ss-row-between">
			<z-required-title :required="required">{{ label }}</z-required-title>
			<view v-if="type == 'lookReport'" class="ss-flex">
				<text v-if="modelValue" class="fc-dark6">查看检测报告</text>
				<z-icon name="arrow-right" size="24rpx" class="ss-m-t-8"></z-icon>
			</view>
			<view v-if="type == 'repairPlan'">
				<z-icon name="icon-add" size="40rpx"></z-icon>
			</view>
		</view>
		<view v-if="type == 'cart'" class="inputClass">
			<view @tap="showKeyboard" :class="`${!modelValue?'pla-color':'fc-dark6'} fs-28`">{{ modelValue || placeholder }}</view>
		</view>
		<view v-if="type == 'input'" class="inputClass">
			<input :value="modelValue" :maxlength="maxlength" @input="getInputValue" :type="inputType" :placeholder="placeholder" placeholder-class="pla-color" />
		</view>
		<view @tap="selectShow = !selectShow" v-if="type == 'select'" class="inputClass ss-flex ss-row-between">
			<view :class="`${!modelValue?'pla-color':'fc-dark6'} fs-28`">{{ getSelectName() || placeholder }}</view>
			<z-icon name="arrow-down"></z-icon>
		</view>
		<view v-if="type == 'repairPlan'" class="">
			<RepairPlan :modelValue="modelValue" @change="changeRepairCase" @delCase="delCase" />
		</view>
	</view>
	 <xm-keyboard-v2 ref="xmKeyboard" @confirm="(v) => setValue(v)"></xm-keyboard-v2>
	 <z-picker :list="[getSelectList()]" v-model="selectShow" :valueName="modelValue" @confirm="confirmSelect"></z-picker>
</template>

<script setup>
	import sheep from '@/sheep'
	import RepairPlan from "./RepairPlan"
	const props = defineProps({
		label: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: '请输入'
		},
		type:{
			type: String,
			default: 'input'
		},
		modelValue: {
			type: [String,Number],
			default: ''
		},
		inputType: {
			type: String,
			default: 'text'
		},
		maxlength: {
			type: [Number,String],
			default: '-1'
		},
		gap:{
			type: String,
			default: '16'
		},
		className:{
			type: String,
			default: ''
		},
		selectType:{
			type: String,
			default: 'brandList'
		},
		required:{
			type: Boolean,
			default: true
		}
	})
	const xmKeyboard = ref(null)
	const selectShow = ref(false)
	const emits = defineEmits(['update:modelValue'])
	const brandList = computed(() => sheep.$store('app').brandList)
	const yewulists = computed(() => sheep.$store('app').yewulists)
	const jyproject = computed(() => sheep.$store('app').jyproject)
	const zzproject = computed(() => sheep.$store('app').zzproject)
	
	function getInputValue(e){
		setValue(e.detail.value)
	}
	function setValue(value){
		emits('update:modelValue',value)
	}
	function showKeyboard(){
		xmKeyboard.value.toShow(props.modelValue)
	}
	function confirmSelect(e){
		emits('update:modelValue',e)
	}
	function handleType(){
		if(props.type == 'lookReport'){
			sheep.$router.go('/pages/order/testReport')
		}else if(props.type == 'repairPlan') {
			addRepairCase()
		}
	}
	function getSelectName(){
		if(props.selectType == 'brandList'){
			let item = brandList.value.find(item => item.id == props.modelValue)
			return item?.name
		}
		if(props.selectType == 'yewulists'){
			let item = yewulists.value.find(item => item.id == props.modelValue)
			return item?.name
		}
		if(props.selectType == 'jyproject'){
			let item = jyproject.value.find(item => item.id == props.modelValue)
			return item?.name
		}
		if(props.selectType == 'zzproject'){
			let item = zzproject.value.find(item => item.id == props.modelValue)
			return item?.name
		}
	}
	function getSelectList(){
		if(props.selectType == 'brandList'){
			return brandList.value
		}
		if(props.selectType == 'yewulists'){
			return yewulists.value
		}
		if(props.selectType == 'jyproject'){
			return jyproject.value
		}
		if(props.selectType == 'zzproject'){
			return zzproject.value
		}
	}
	function addRepairCase(){
		let newRepairCase = props.modelValue?JSON.parse(props.modelValue):[]
		newRepairCase.push({
			peijian:[],
			tiaojiao:[],
			remake:'',
			check:true
		})
		emits('update:modelValue',JSON.stringify(newRepairCase))
	}
	function changeRepairCase(e){
		emits('update:modelValue',JSON.stringify(e))
	}
	function delCase(index){
		let newRepairCase = props.modelValue?JSON.parse(props.modelValue):[]
		newRepairCase.splice(index,1)
		emits('update:modelValue',JSON.stringify(newRepairCase) || [])
	}
</script>

<style lang="scss" scoped>
	.pla-color {
		color: #BBBBBB;
	}
	.inputClass {		
		background: #F6F7F8;
		border-radius: 4rpx;
		padding: 20rpx 32rpx;
		color: $dark6;
		font-size: 28rpx;		
	}
	
</style>